<!DOCTYPE html>
<html lang="en" ondragstart="false">

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>别慌！让花瓣飘一会儿。</title>
    <!-- 层叠样式表 -->
    <style type="text/css">
        /* 去掉默认效果 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #222;
            overflow: hidden;
            /* 取消选中 */
            user-select: none;
        }
        
        @keyframes rotate {
            100% {
                transform: rotateY(360deg);
            }
        }
        
        .perspective {
            /*子元素透视 场景深度*/
            perspective: 600px;
        }
        
        .wrap {
            /* 3d */
            width: 135px;
            height: 240px;
            margin: 100px auto;
            position: relative;
            /* border: 1px solid red; */
            transform: rotateX(-20deg) rotateY(0deg);
            transform-style: preserve-3d;
        }
        
        .wrap img {
            display: block;
            /* 绝对定位 */
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotateY(0deg) translateZ(0px);
            background: transparent;
            box-shadow: 0 0 4px #fff;
            border-radius: 5px;
            /* webkit */
        }
        /* 照片底座 */
        
        .wrap p {
            width: 1200px;
            height: 1200px;
            background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
            position: absolute;
            border-radius: 50%;
            left: 50%;
            top: 100%;
            margin-left: -600px;
            margin-top: -600px;
            /* 沿着x轴按倒 */
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <!-- 盒子容器 -->
    <div class="perspective">
        <div class="wrap" id="imgwrap">
            <!-- 引入图片值页面 -->
            <!-- 30张 -->
            <img class="f1" src="img/15.jpg" />
            <img class="f1" src="img/16.jpg" />
            <img class="f1" src="img/17.jpg" />
            <img class="f1" src="img/18.jpg" />
            <img class="f1" src="img/19.jpg" />
            <img class="f1" src="img/20.jpg" />
            <img class="f1" src="img/21.jpg" />
            <img class="f1" src="img/22.jpg" />
            <img class="f1" src="img/23.jpg" />
            <img class="f1" src="img/24.jpg" />
            <img class="f1" src="img/25.jpg" />
            <img class="f1" src="img/26.jpg" />
            <img class="f1" src="img/27.jpg" />
            <img class="f1" src="img/28.jpg" />
            <img class="f1" src="img/29.jpg" />
            <img class="f1" src="img/30.jpg" />
            <img class="f1" src="img/1.jpg" />
            <img class="f1" src="img/2.jpg" />
            <img class="f1" src="img/3.jpg" />
            <img class="f1" src="img/4.jpg" />
            <img class="f1" src="img/5.jpg" />
            <img class="f1" src="img/6.jpg" />
            <img class="f1" src="img/7.jpg" />
            <img class="f1" src="img/5.jpg" />
            <img class="f1" src="img/6.jpg" />
            <img class="f1" src="img/7.jpg" />
            <img class="f1" src="img/8.jpg" />
            <img class="f1" src="img/9.jpg" />
            <img class="f1" src="img/10.jpg" />
            <img class="f1" src="img/11.jpg" />
            <img class="f1" src="img/12.jpg" />
            <img class="f1" src="img/13.jpg" />
            <img class="f1" src="img/14.jpg" />

            <!-- 引入图片值页面 -->
            <img class="f2" src="img/1.jpg" />
            <img class="f2" src="img/2.jpg" />
            <img class="f2" src="img/3.jpg" />
            <img class="f2" src="img/4.jpg" />
            <img class="f2" src="img/5.jpg" />
            <img class="f2" src="img/6.jpg" />
            <img class="f2" src="img/7.jpg" />
            <img class="f2" src="img/5.jpg" />
            <img class="f2" src="img/6.jpg" />
            <img class="f2" src="img/7.jpg" />
            <img class="f2" src="img/8.jpg" />
            <img class="f2" src="img/9.jpg" />
            <img class="f2" src="img/10.jpg" />
            <img class="f2" src="img/11.jpg" />
            <img class="f2" src="img/12.jpg" />
            <img class="f2" src="img/25.jpg" />
            <img class="f2" src="img/26.jpg" />
            <img class="f2" src="img/27.jpg" />
            <img class="f2" src="img/28.jpg" />
            <img class="f2" src="img/29.jpg" />
            <img class="f2" src="img/30.jpg" />
            <img class="f2" src="img/13.jpg" />
            <img class="f2" src="img/14.jpg" />
            <img class="f2" src="img/15.jpg" />
            <img class="f2" src="img/16.jpg" />
            <img class="f2" src="img/17.jpg" />
            <img class="f2" src="img/18.jpg" />
            <img class="f2" src="img/19.jpg" />
            <img class="f2" src="img/20.jpg" />
            <img class="f2" src="img/21.jpg" />
            <img class="f2" src="img/22.jpg" />
            <img class="f2" src="img/23.jpg" />
            <img class="f2" src="img/24.jpg" />

            <!-- 引入图片值页面 -->

            <img class="f3" src="img/1.jpg" />
            <img class="f3" src="img/2.jpg" />
            <img class="f3" src="img/11.jpg" />
            <img class="f3" src="img/12.jpg" />
            <img class="f3" src="img/25.jpg" />
            <img class="f3" src="img/26.jpg" />
            <img class="f3" src="img/27.jpg" />
            <img class="f3" src="img/3.jpg" />
            <img class="f3" src="img/4.jpg" />
            <img class="f3" src="img/5.jpg" />
            <img class="f3" src="img/16.jpg" />
            <img class="f3" src="img/17.jpg" />
            <img class="f3" src="img/18.jpg" />
            <img class="f3" src="img/10.jpg" />
            <img class="f3" src="img/28.jpg" />
            <img class="f3" src="img/29.jpg" />
            <img class="f3" src="img/30.jpg" />
            <img class="f3" src="img/13.jpg" />
            <img class="f3" src="img/19.jpg" />
            <img class="f3" src="img/20.jpg" />
            <img class="f3" src="img/21.jpg" />
            <img class="f3" src="img/22.jpg" />
            <img class="f3" src="img/23.jpg" />
            <img class="f3" src="img/24.jpg" />
            <img class="f3" src="img/9.jpg" />
            <img class="f3" src="img/14.jpg" />
            <img class="f3" src="img/15.jpg" />
            <img class="f3" src="img/6.jpg" />
            <img class="f3" src="img/7.jpg" />
            <img class="f3" src="img/5.jpg" />
            <img class="f3" src="img/6.jpg" />
            <img class="f3" src="img/7.jpg" />
            <img class="f3" src="img/8.jpg" />

            <p></p>
        </div>
    </div>
    <!--  src="JS/photo.js" -->
    <script type="text/javascript">
        var oImg = document.getElementsByClassName('f1')
        var oImg2 = document.getElementsByClassName('f2')
        var oImg3 = document.getElementsByClassName('f3')
        var len = oImg.length;
        console.log(len)
        var deg = 360 / len;

        var oWrap = document.getElementById("imgwrap");
        // var oWrap=document.querySelector('.wrap');

        //页面加载完毕在执行的代码
        window.onload = function() {
                Array.prototype.forEach.call(oImg, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                });
                Array.prototype.forEach.call(oImg2, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                });
                Array.prototype.forEach.call(oImg3, function(ele, index, self) {
                    // 旋转并沿Z轴平移
                    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
                    //过渡时间1s
                    ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                });
                // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                //       // 旋转并沿Z轴平移
                //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                //       //过渡时间1s
                //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                // });

            }
            //翻动3D相册
        var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,
            rotY = 0;

        document.onmousedown = function(e) {
            // 点击设置初值
            lastX = e.clientX;
            lastY = e.clientY;

            this.onmousemove = function(e) {
                newX = e.clientX;
                newY = e.clientY;
                minusX = newX - lastX;
                minusY = newY - lastY;

                rotX -= minusY * 0.2;
                rotY += minusX * 0.1;
                oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                lastX = newX;
                lastY = newY;

            }
            this.onmouseup = function(e) {
                //鼠标松开
                this.onmousemove = null; //清除鼠标移动
            }
        }
    </script>

    <script>
        var stop, staticx;
        var img = new Image();
        img.src = "";

        function Sakura(x, y, s, r, fn) {
            this.x = x;
            this.y = y;
            this.s = s;
            this.r = r;
            this.fn = fn;
        }

        Sakura.prototype.draw = function(cxt) {
            cxt.save();
            var xc = 40 * this.s / 4;
            cxt.translate(this.x, this.y);
            cxt.rotate(this.r);
            cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
            cxt.restore();
        }

        Sakura.prototype.update = function() {
            this.x = this.fn.x(this.x, this.y);
            this.y = this.fn.y(this.y, this.y);
            this.r = this.fn.r(this.r);
            if (this.x > window.innerWidth ||
                this.x < 0 ||
                this.y > window.innerHeight ||
                this.y < 0
            ) {
                this.r = getRandom('fnr');
                if (Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
            }
        }

        SakuraList = function() {
            this.list = [];
        }
        SakuraList.prototype.push = function(sakura) {
            this.list.push(sakura);
        }
        SakuraList.prototype.update = function() {
            for (var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].update();
            }
        }
        SakuraList.prototype.draw = function(cxt) {
            for (var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].draw(cxt);
            }
        }
        SakuraList.prototype.get = function(i) {
            return this.list[i];
        }
        SakuraList.prototype.size = function() {
            return this.list.length;
        }

        function getRandom(option) {
            var ret, random;
            switch (option) {
                case 'x':
                    ret = Math.random() * window.innerWidth;
                    break;
                case 'y':
                    ret = Math.random() * window.innerHeight;
                    break;
                case 's':
                    ret = Math.random();
                    break;
                case 'r':
                    ret = Math.random() * 6;
                    break;
                case 'fnx':
                    random = -0.5 + Math.random() * 1;
                    ret = function(x, y) {
                        return x + 0.5 * random - 1.7;
                    };
                    break;
                case 'fny':
                    random = 1.5 + Math.random() * 0.7
                    ret = function(x, y) {
                        return y + random;
                    };
                    break;
                case 'fnr':
                    random = Math.random() * 0.03;
                    ret = function(r) {
                        return r + random;
                    };
                    break;
            }
            return ret;
        }

        function startSakura() {

            requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame;
            var canvas = document.createElement('canvas'),
                cxt;
            staticx = true;
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
            canvas.setAttribute('id', 'canvas_sakura');
            document.getElementsByTagName('body')[0].appendChild(canvas);
            cxt = canvas.getContext('2d');
            var sakuraList = new SakuraList();
            for (var i = 0; i < 50; i++) {
                var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
                randomX = getRandom('x');
                randomY = getRandom('y');
                randomR = getRandom('r');
                randomS = getRandom('s');
                randomFnx = getRandom('fnx');
                randomFny = getRandom('fny');
                randomFnR = getRandom('fnr');
                sakura = new Sakura(randomX, randomY, randomS, randomR, {
                    x: randomFnx,
                    y: randomFny,
                    r: randomFnR
                });
                sakura.draw(cxt);
                sakuraList.push(sakura);
            }
            stop = requestAnimationFrame(function() {
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                sakuraList.update();
                sakuraList.draw(cxt);
                stop = requestAnimationFrame(arguments.callee);
            })
        }

        window.onresize = function() {
            var canvasSnow = document.getElementById('canvas_snow');
            canvasSnow.width = window.innerWidth;
            canvasSnow.height = window.innerHeight;
        }

        img.onload = function() {
            startSakura();
        }

        function stopp() {
            if (staticx) {
                var child = document.getElementById("canvas_sakura");
                child.parentNode.removeChild(child);
                window.cancelAnimationFrame(stop);
                staticx = false;
            } else {
                startSakura();
            }
        }
    </script>
</body>

</html>